import {StyleSheet } from 'react-native';

// 样式表
export  const styles = StyleSheet.create({
  row: {
    flexDirection: 'row',
    gap :16,
    alignItems: 'center',      // 水平居中
    // justifyContent: 'space-between', // 按钮之间平分空间
    marginBottom: 16, // 每行之间的间距
  },

  button: {
    justifyContent: 'center',
    alignItems: 'center',
    padding: 0, // 等价于 contentPadding: PaddingValues(0.dp)
  },

  buttonWrapper: {
    flexDirection:"column",
    gap:10,
    // flex: 1, // 占据整个屏幕
    // alignItems: "center", // 水平居中
    justifyContent: "flex-end", // 垂直居中
    // position: "absolute", // 绝对定位
    // bottom: 16, // 距底部 16px
    // right: 16, // 距右侧 16px
  },
  spacer: {
    height:10
  },


  text: {
    margin: 10,
    fontSize: 20,
    width:200,},
    
  textInput: {
    margin: 10,
    height: 40,
    borderColor: 'black',
    borderWidth: 1,
    paddingLeft: 5,
    paddingRight: 5,
    borderRadius: 5,
  },

  modalOverlay: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'rgba(0, 0, 0, 0.5)', // 半透明背景
  },
  modalContent: {
    width: 300,
    padding: 20,
    backgroundColor: 'white',
    borderRadius: 10,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.25,
    shadowRadius: 4,
    elevation: 5, // Android 阴影
  },
  modalText: {
    fontSize: 18,
    marginBottom: 20,
    textAlign: 'center',
  },

  backgroundVideo: {
    width:300,
    height:300,
  },

  box: {
    backgroundColor: 'skyblue',
    padding: 20,
    borderRadius: 10,
    marginTop: 100,
  },

  box1: {
    backgroundColor: 'red',
    borderRadius: 6,
    width:200,
    height:200,
    alignItems:"center",
    justifyContent:"center",
  },

  innerBox: {
    width: 50,
    height: 50,
    backgroundColor: 'blue',
  },


  title: {
    fontSize: 18,
    fontWeight: 'bold',
    marginBottom: 5,
  },
  body: {
    fontSize: 16,
    marginBottom: 5,
  },
  status: {
    fontSize: 14,
    color: 'gray',
  },

  backgroundImage: {
    position: 'absolute',
    width: '100%',
    height: '100%',
    resizeMode: 'cover', // 确保图片按比例填充整个屏幕
  },


  content: {
    flex: 1,
    padding: 30/3.5, // 给内容区域设置内边距
  },

  content2: {
    flex: 1,
    justifyContent:"center",
    alignItems:"center",
    padding: 30/3.5, // 给内容区域设置内边距
  },

  content1: {
    flex: 1,
    flexDirection:"row",
    padding: 30/3.5, // 给内容区域设置内边距
  },


  frame: {
    alignItems:"center",
    width: 500/3.5,
    height: 500/3.5,
    backgroundColor: '#FFFFFF',
    borderRadius: 20/3.5,
    shadowColor: '#000', // 设置阴影颜色
    shadowOffset: {
      width: 8/3.5, // 水平阴影偏移
      height: 8/3.5, // 垂直阴影偏移
    },
    shadowOpacity: 0.25, // 阴影透明度
    shadowRadius: 4/3.5, // 阴影模糊半径
    elevation: 10/3.5, // Android 上的阴影效果
  },

  text48: {
    fontFamily: 'Source Han Sans CN', // 如果需要，确保该字体在项目中可用
    fontWeight: '700',
    fontSize: 48/3.5,
    lineHeight: 70/3.5,
    textAlign: 'center',
    color: '#2C72E5',
  },  

  text20: {
    fontFamily: 'Source Han Sans CN', // 确保字体已经正确加载
    fontWeight: '700',
    fontSize: 20/3.5,
    lineHeight: 29/3.5,
    textAlign: 'center',
    color: 'rgba(51, 51, 51, 0.6)',
  } ,

  container: {
    flex: 1,
    flexDirection:"column",
    backgroundColor: '#ffffffff',
    alignItems:"center",
    justifyContent:"center",
  },
  child: {
    position: 'absolute',
    top: 0,
    left: 0,
    backgroundColor: 'lightblue',
    padding: 10,
    borderRadius: 5,
  },

  child1: {
    position: 'absolute',
    top: 40,
    left: 0,
    backgroundColor: 'lightblue',
    padding: 0,
    borderRadius: 5,
  },


  circles: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  progress: {
    margin: 10,
  },

  

});



